<template>
    <div class="folder" :class="{'active' : activeFolderId == folderValue.id,'show' : show }">
        <div class="folder-name" @click="selectFolder">
            <div class="icon" @click.stop="show = !show">
                <i class="el-icon-arrow-right"></i>
            </div>
            <div class="folder-title">{{folderValue.title + '( DOC ' + folderValue.docList.length + ' ) '}}</div>
        </div>
        <el-collapse-transition>
            <div v-show="show">
                <div class="folder-list">
                    <folder v-for="item in folderValue.folderList" :key="item.id" :folderValue="item" :activeFolderId="activeFolderId" :selectFolderEvent="selectFolderEvent"></folder>
                </div>
                <div class="empty" v-if="!folderValue.folderList.length">(空)</div>
            </div>
        </el-collapse-transition>
    </div>
</template>
<script>
export default {
    name: 'folder',
    props: ['folderValue', 'activeFolderId', 'selectFolderEvent'],
    data() {
        return {
            show: false,
        }
    },
    methods: {
        selectFolder() {
            this.selectFolderEvent(this.folderValue);
        },
    }
}
</script>
<style>

</style>